<template>
	<view class="uiwu">
		<view class="uiwu-scroll">
			<scroll-view scroll-x>
				<view class="uiwu-scroll-list uiwu-flex-align">
					<view class="item" :class="index == ActiveIndex ? 'active' : ''"
						v-for="(item, index) in menuTablist" :key="index" @tap="swiperTap(index)">
						{{ item }}
					</view>
				</view>
			</scroll-view>

		</view>
		<scroll-view class="uiwu-list-scroll" :class="ActiveIndex == 0 ? 'active' : ''" scroll-y>
			<uiwu-list :loading="more" v-if="listData.length > 0 || ActiveIndex != 0"
				@scrolltolower="getprizelist(true)">
				<view class="uiwu-deposit" v-if="ActiveIndex == 0">
					<view class="uiwu-deposit-item uiwu-flex-align" v-for="(item, index) in listData" :key="index">
						<radio color="#EF821E" :checked="item.checked" :value="item.id + ''" @tap="changeRadio(item)" />
						<image :src="item.product_image" mode="aspectFill"></image>
						<view class="in">
							<view class="title">{{ item.product_name }}</view>
							<view class="tips">{{ getDay(item.expire_time) }}天后过期</view>
							<view class="time">{{ uiwu.formatTimestamp(item.add_time * 1000) }}</view>
						</view>
					</view>
				</view>
				<view class="uiwu-list" v-else>
					<view class="uiwu-list-item uiwu-flex-align" v-for="(item, index) in listData" :key="index"
						@tap="uiwu.openWindow(`/pages/prize/prizeDetail?id=${item.id}`)">
						<image :src="item.product_image" mode="aspectFill"></image>
						<view class="in uiwu-flex-column">
							<view class="title uiwu-flex-space">
								<text style="flex: 1;">{{ item.product_name }}</text>
								<text>{{ menuTablist[ActiveIndex] }}</text>
							</view>
							<view class="jifen" v-if="ActiveIndex == 4">【{{ item.give_integral }}积分】</view>
							<view class="time">{{ uiwu.formatTimestamp(item.add_time * 1000) }}</view>
						</view>
					</view>
				</view>
			</uiwu-list>
			<view v-if="ActiveIndex == 0 && listData.length == 0" class="notedata uiwu-flex-column uiwu-flex-center">
				<image src="/static/image/blank-space.png" mode="widthFix"></image>
				<text>暂未获得奖品</text>
				<view class="uiwu-flex-center qj-bg-red" @tap="goHomeBack">去玩游戏</view>
			</view>
		</scroll-view>
		<uiwu-footer height="196rpx" v-if="ActiveIndex == 0 && listData.length > 0">
			<view style="width: 100%;">
				<label class="uiwu-footer-radio uiwu-flex-align" @tap="allChangeRadio">
					<radio value="1" color="#EF821E" @tap.stop="allChangeRadio" :checked="allAIsTrue" /><text>全选</text>
				</label>
				<view class="uiwu-footer flex justify-center w-full" style="padding: 0;">
					<view class="uiwu-footer-box flex justify-between w-94 ">
						<text class="uiwu-flex-center" @tap="openWindow(`/pages/prize/exchange`)">积分兑换</text>
						<text class="uiwu-flex-center" @tap="openWindow(`/pages/prize/confirm`)">申请发货</text>
					</view>
				</view>
			</view>
		</uiwu-footer>
	</view>
</template>

<script setup lang="ts">
import { uiwu } from '@/api/interface/interface';
import { prizelist } from '@/api/interface/prize';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { inject, ref } from 'vue';
import { footerStore } from '@/store/footerStore';
const menuTablist = ref<Array<string>>(['寄存中', '待发货', '待收货', '已完成', '已兑换'])
const ActiveIndex = ref<number>(0)
const listData = ref<Array<object>>([])
const pageNum = ref<number>(1)
const lastPage = ref<any>(1);
const more = ref<string>('loading');
const isLock = ref<boolean>(true)
const allAIsTrue = ref<boolean>(false)
const swiperTap = (index: number) => {
	ActiveIndex.value = index
	getprizelist()
}
const isAjax = ref(false)
const getprizelist = async (mack: boolean = false): Promise<any> => {
	if (!mack) pageNum.value = 1
	if(isAjax.value) return
	if (pageNum.value > lastPage.value) return;
	const { data: { data, total, last_page } } = await prizelist({
		page: pageNum.value,
		state: ActiveIndex.value
	});

	lastPage.value = last_page < 1 ? 1 : last_page;
	pageNum.value++;
	isLock.value = true
	const index = setTimeout(() => {
		isAjax.value = false;
		clearTimeout(index)
	})
	
	uiwu.setlist({
		isMore: mack,
		listData,
		total,
		listRow: data,
		more,
		pageNum
	})
	allAIsTrue.value = listData.value.every(item => item.checked === true);
}
const { setCurrent } = footerStore()
const goHomeBack = () => {
	setCurrent(0)
	uni.redirectTo({
		url: '/pages/index/index'
	})
}
const openWindow = (url: string) => {
	if (!getCheckedId().length) return uiwu.toast('请选择商品')
	uiwu.openWindow(`${url}?ids=${JSON.stringify(getCheckedId())}`)
}
/**
 * 选中某个商品
 */
const changeRadio = (item) => {
	item.checked = !item.checked
	allAIsTrue.value = listData.value.every(item => item.checked === true);
}
/**
 * 全选
 */
const allChangeRadio = () => {
	listData.value.forEach((item) => {
		item.checked = !item.checked
	})
	allAIsTrue.value = listData.value.every(item => item.checked === true);
}
const getCheckedId = () => {
	return listData.value.filter(val => val.checked).map(val => val.id)
}
/**
 * 获取到期时间
 */
const getDay = (time: number) => {
	const currentTimestamp = Math.floor(Date.now() / 1000);
	const daysDifference = time - currentTimestamp
	return Math.floor(daysDifference / (60 * 60 * 24)) || 0
}
onShow(() => {
	getprizelist()
})
onLoad((op) => {
	ActiveIndex.value = op.index;
});
</script>

<style lang="scss">
page {
	background-color: #e6e6e6;
	--prmairy-color: rgba(230, 0, 18, 1);
}

.uiwu-scroll {
	background-color: #272323;
	width: 100%;
	height: 82rpx;

	&-list {
		padding: 0 24rpx;
		justify-content: space-between;
		height: 82rpx;

		.item {
			flex-shrink: 0;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
			height: 55rpx;
			line-height: 55rpx;

			&.active {
				text-align: center;
				width: 176rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #FFFFFF;
				line-height: inherit;
				text-shadow: 0px 4rpx 0rpx #231815;
			}
		}
	}
}

.notedata {
	width: 100%;
	height: calc(100vh - 102rpx - 196rpx);

	image {
		width: 220rpx;
	}

	text {
		font-size: 28rpx;
		font-weight: 500;
		color: #444444;
		margin-top: 10rpx;
	}

	view {
		width: 300rpx;
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-top: 40rpx;
	}
}

.uiwu-deposit {
	background-color: #fff;

	&-item {
		padding: 24rpx;
		border-bottom: 1rpx solid #e6e6e6;

		&:last-child {
			border-bottom: 0;
		}
	}

	radio {
		transform: scale(0.8);
	}

	image {
		width: 136rpx;
		height: 136rpx;
		border-radius: 16rpx;
		margin: 0 24rpx;
	}

	.in {
		flex: 1;

		.title {
			font-size: 28rpx;
			font-weight: 800;
			color: #231815;
		}

		.tips {
			margin: 10rpx 0 10rpx;
			display: inline-block;
			padding: 4rpx 10rpx;
			height: 40rpx;
			border-radius: 8rpx;
			border: 1rpx solid #E6E6E6;
			font-size: 24rpx;
			font-weight: 500;
			color: #444444;
		}

		.time {
			font-size: 24rpx;
			font-weight: 300;
			color: #999999;
		}
	}
}

.uiwu-list {
	padding: 0 24rpx;
	background-color: #fff;

	&-item {
		padding: 24rpx 0;

		image {
			width: 136rpx;
			height: 136rpx;
			border-radius: 16rpx;
			margin-right: 24rpx;
		}

		.in {
			flex: 1;
			height: 136rpx;
			justify-content: space-around;
		}

		.title {
			text {
				font-size: 28rpx;
				font-weight: 800;
				color: #231815;

				&:nth-child(2) {
					color: var(--prmairy-color);
					font-weight: 400;
				}
			}
		}

		.jifen {
			font-size: 24rpx;
			font-weight: 500;
			color: #444444;
		}

		.time {
			font-size: 24rpx;
			font-weight: 300;
			color: #999999;
		}
	}
}

.uiwu-list-scroll {
	width: 100%;
	margin-top: 20rpx;
	height: calc(100vh - 102rpx);
	/* #ifdef H5 */
	height: calc(100vh - 102rpx - 44px);

	/* #endif */
	&.active {
		height: calc(100vh - 102rpx - 196rpx);
		/* #ifdef H5 */
		height: calc(100vh - 102rpx - 196rpx - 44px);
		/* #endif */
	}

}

.uiwu-footer {
	width: 100%;
	padding: 0 24rpx;
	background-color: #fff;

	&-box {
		padding: 16rpx 0;

		text {
			width: 338rpx;
			height: 72rpx;
			border-radius: 36rpx;
			border: 3rpx solid var(--prmairy-color);
			font-size: 32rpx;
			font-weight: bold;
			color: var(--prmairy-color);

			&:nth-child(2) {
				background-color: var(--prmairy-color);
				color: #FFF;
			}
		}
	}
}

.uiwu-footer-radio {
	padding: 24rpx;

	radio {
		transform: scale(0.8);
	}

	text {
		font-size: 28rpx;
		font-weight: bold;
		color: #231815;
	}
}
</style>